import { BrowserRouter as Router,Route,Routes,Link,Outlet,useRoutes,useNavigate } from "react-router-dom";
import BlogList from "./BlogList"
import Index from "./index"
import BlogDetail from "./BlogDetail";


function MyRoutes() {
  const element = useRoutes([
    {
      path: "/blogList/:id",
      element:<BlogList/>,
    },
    {
      path:"blogDetail/:id",
      element:<BlogDetail></BlogDetail>
    }
  ]);
  return element;
}

// const ALL_ROUTER: Record<string, React.FC<any>> = {
//   Category1,
//   Category2,
// };
// export type RouteItem = {
//   RouterName: string;
//   Component: string;
// };
export const CustomRoute = () => {
  //const routerlist = useRouterList();
  return (
    <>
      <MyRoutes/>
      {/* <Route path="test-image" element={<GenerateImage />} /> */}
      {/* {routerlist?.map(({ RouterName, Component: ComponentName }, index) => {
        const i = Object.keys(ALL_ROUTER).findIndex(x => x == ComponentName);
        let Component: React.FC<any> = NotFound;
        if (i >= 0) {
          Component = Object.values(ALL_ROUTER)[i];
        }
        return (
          <Route
            key={index}
            path={RouterName}
            element={
              //<MenuLayout>
                <Component />
              //</MenuLayout>
            }
          />
        );
      })} */}
      {/* <Route path="*" element={<NotFound />} /> */}
</>
  );
};
